<template>
  <div class="dashboard-container">
    <!-- 顶部导航栏 -->
    <HeaderBar />
    
    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- BIM模型背景 -->
      <BIMModelViewer />
      
      <!-- 浮动窗口 - 机器狗视角 (左上) -->
      <DogCameraView class="floating-window dog-camera" />
      
      <!-- 浮动窗口 - 全景视图 (左下) -->
      <PanoramicView class="floating-window panoramic-view" />
      
      <!-- 机器狗状态面板 (左下角) -->
      <div class="floating-window robot-status-panel">
        <div class="status-header">
          <span class="status-title">机器狗状态</span>
        </div>
        <div class="status-content">
          <div class="status-item">
            <span class="status-label">位置:</span>
            <span class="status-value">X:245 Y:182</span>
          </div>
          <div class="status-item">
            <span class="status-label">方向:</span>
            <span class="status-value">135°</span>
          </div>
          <div class="status-item">
            <span class="status-label">状态:</span>
            <span class="status-value status-online">正常巡逻</span>
          </div>
          <div class="status-item">
            <span class="status-label">电量:</span>
            <span class="status-value">78%</span>
          </div>
          <div class="status-item">
            <span class="status-label">信号:</span>
            <span class="status-value status-good">良好</span>
          </div>
        </div>
      </div>
      
      <!-- 浮动窗口 - 手动控制面板 (右上) -->
      <ManualControlPanel class="floating-window manual-control-panel" />
      
      <!-- 浮动窗口 - 智能指令面板 (右下) -->
      <CommandPanel class="floating-window intelligent-command-panel" />
      
      <!-- 楼层选择器 (右侧独立位置) -->
      <FloorSelector class="floating-window floor-selector" />
      

    </div>
  </div>
</template>

<script setup>
import HeaderBar from '../components/HeaderBar.vue'
import BIMModelViewer from '../components/BIMModelViewer.vue'
import DogCameraView from '../components/DogCameraView.vue'
import PanoramicView from '../components/PanoramicView.vue'
import ManualControlPanel from '../components/ManualControlPanel.vue'
import CommandPanel from '../components/CommandPanel.vue'
import FloorSelector from '../components/FloorSelector.vue'
</script>

<style scoped>
.dashboard-container {
  width: 100vw;
  height: 100vh;
  background: #0A192F;
  position: relative;
  overflow: hidden;
}

.main-content {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px); /* 减少顶部导航栏高度 */
  margin-top: 50px;
}

/* 响应式浮动窗口定位 */
.dog-camera {
  top: 44px;
  left: 0.3vw;
  width: min(280px, 22vw);
  height: min(380px, 45vh);
  min-width: 240px;
  min-height: 300px;
  z-index: 10;
}

.panoramic-view {
  top: calc(44px + min(380px, 45vh) + 4px);
  bottom: 4px;
  left: 0.3vw;
  width: min(280px, 22vw);
  height: auto;
  min-width: 240px;
  z-index: 10;
}

.robot-status-panel {
  bottom: 4px;
  left: calc(0.3vw + min(280px, 22vw) + 4px);
  width: min(200px, 15vw);
  min-width: 160px;
  background: rgba(10, 25, 47, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px;
  z-index: 10;
}

.manual-control-panel {
  top: 44px;
  right: 0.3vw;
  width: min(320px, 25vw);
  height: calc((100vh - 44px - 50px - 4px) / 2.3);
  min-width: 280px;
  min-height: 200px;
  z-index: 10;
}

.intelligent-command-panel {
  top: calc(44px + (100vh - 44px - 50px - 4px) / 2.3 + 4px);
  right: 0.3vw;
  width: min(320px, 25vw);
  height: calc((100vh - 44px - 50px - 4px) * 1.3 / 2.3);
  min-width: 280px;
  min-height: 200px;
  z-index: 10;
}

.floor-selector {
  top: calc(44px + (100vh - 44px - 50px - 4px) / 4.6);
  right: calc(0.3vw + min(320px, 25vw) + 4px);
  width: min(50px, 4vw);
  min-width: 40px;
  z-index: 15;
}



/* 机器狗状态面板样式 */
.status-header {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-color);
  height: 24px;
}

.status-title {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.status-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.status-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  color: var(--text-secondary);
  font-size: 12px;
}

.status-value {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 500;
}

.status-online {
  color: var(--success-green);
}

.status-good {
  color: var(--success-green);
}

/* 响应式媒体查询 */
@media (max-width: 1400px) {
  .dog-camera {
    width: min(260px, 24vw);
    height: min(350px, 42vh);
  }
  
  .panoramic-view {
    width: min(260px, 24vw);
    top: calc(44px + min(350px, 42vh) + 4px);
  }
  
  .robot-status-panel {
    left: calc(0.3vw + min(260px, 24vw) + 4px);
    width: min(180px, 16vw);
  }
  
  .manual-control-panel {
    width: min(300px, 27vw);
    height: calc((100vh - 44px - 50px - 4px) / 2.3);
  }
  
  .intelligent-command-panel {
    width: min(300px, 27vw);
    top: calc(44px + (100vh - 44px - 50px - 4px) / 2.3 + 4px);
    height: calc((100vh - 44px - 50px - 4px) * 1.3 / 2.3);
  }
  
  .floor-selector {
    right: calc(0.3vw + min(300px, 27vw) + 4px);
    top: calc(44px + (100vh - 44px - 50px - 4px) / 4.6);
  }
}

@media (max-width: 1200px) {
  .dog-camera {
    width: min(240px, 26vw);
    height: min(320px, 40vh);
  }
  
  .panoramic-view {
    width: min(240px, 26vw);
    top: calc(44px + min(320px, 40vh) + 4px);
  }
  
  .robot-status-panel {
    left: calc(0.3vw + min(240px, 26vw) + 4px);
    width: min(160px, 18vw);
  }
  
  .manual-control-panel {
    width: min(280px, 30vw);
    height: calc((100vh - 44px - 50px - 4px) / 2.3);
  }
  
  .intelligent-command-panel {
    width: min(280px, 30vw);
    top: calc(44px + (100vh - 44px - 50px - 4px) / 2.3 + 4px);
    height: calc((100vh - 44px - 50px - 4px) * 1.3 / 2.3);
  }
  
  .floor-selector {
    right: calc(0.3vw + min(280px, 30vw) + 4px);
    top: calc(44px + (100vh - 44px - 50px - 4px) / 4.6);
  }
}

@media (max-width: 1024px) {
  .main-content {
    height: calc(100vh - 45px);
    margin-top: 45px;
  }
  
  .dog-camera {
    width: min(220px, 28vw);
    height: min(280px, 35vh);
    top: 40px;
  }
  
  .panoramic-view {
    width: min(220px, 28vw);
    top: calc(40px + min(280px, 35vh) + 4px);
  }
  
  .robot-status-panel {
    left: calc(0.3vw + min(220px, 28vw) + 4px);
    width: min(140px, 20vw);
    font-size: 11px;
  }
  
  .manual-control-panel {
    width: min(260px, 32vw);
    height: calc((100vh - 40px - 45px - 4px) / 2.3);
    top: 40px;
  }
  
  .intelligent-command-panel {
    width: min(260px, 32vw);
    top: calc(40px + (100vh - 40px - 45px - 4px) / 2.3 + 4px);
    height: calc((100vh - 40px - 45px - 4px) * 1.3 / 2.3);
  }
  
  .floor-selector {
    right: calc(0.3vw + min(260px, 32vw) + 4px);
    top: calc(40px + (100vh - 40px - 45px - 4px) / 4.6);
    width: min(45px, 5vw);
  }
}

@media (max-width: 768px) {
  .main-content {
    height: calc(100vh - 40px);
    margin-top: 40px;
  }
  
  /* 移动端垂直堆叠布局 */
  .dog-camera {
    top: 36px;
    left: 2vw;
    width: 46vw;
    height: 30vh;
  }
  
  .panoramic-view {
    top: calc(36px + 30vh + 4px);
    left: 2vw;
    width: 46vw;
    height: 25vh;
  }
  
  .robot-status-panel {
    bottom: 4px;
    left: 2vw;
    width: 46vw;
    font-size: 10px;
  }
  
  .manual-control-panel {
    top: 36px;
    right: 2vw;
    width: 46vw;
    height: calc((100vh - 36px - 40px - 25vh - 12px) / 2.3);
  }
  
  .intelligent-command-panel {
    top: calc(36px + (100vh - 36px - 40px - 25vh - 12px) / 2.3 + 4px);
    right: 2vw;
    width: 46vw;
    height: calc((100vh - 36px - 40px - 25vh - 12px) * 1.3 / 2.3);
  }
  
  .floor-selector {
    top: calc(36px + (100vh - 36px - 40px - 25vh - 12px) / 4.6);
    right: calc(48vw + 2vw);
    width: 6vw;
    min-width: 35px;
  }
}
</style>